<template>
    <div class="auth-layout">
      <div class="card-container">
        <div class="card-header">
          <div class="logo">
          
            <h1>密钥管理</h1>
          </div>
        </div>
        <div class="card-body">
          <el-card class="version-card">
            <template #header>
              <div class="card-header-inner">密钥信息</div>
            </template>
            <el-table :data="versions" border stripe style="width: 100%">
              <el-table-column prop="versionId" label="版本ID">
                <template #header>
                  <div class="header-cell">密钥ID</div>
                </template>
              </el-table-column>
              <el-table-column prop="versionNo" label="版本号">
                <template #header>
                  <div class="header-cell">密钥名</div>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间">
                <template #header>
                  <div class="header-cell">创建时间</div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{row}">
                  <el-button type="primary" @click="renameKey( row.versionId)">重命名密钥</el-button>
                  <el-button type="danger" @click="deleteKey( row.versionId)">删除密钥</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        <div class="card-footer">
        
        </div>
        <div class="top-right-buttons">
            <el-button type="primary" @click="findall">刷新数据</el-button>
          <el-button type="primary" @click="find">查找</el-button>
          <el-button type="success" @click="addKey">添加密钥</el-button>
        </div>
        <div class="bottom-right-button">
          <el-button @click="goBackToFileSystem">返回主页面</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import { ElMessageBox, ElMessage } from 'element-plus';

  const versions = ref([]);
  
  onMounted(() => {
    axios.get('http://localhost:8083/versions')
     .then(response => {
        versions.value = response.data;
      })
     .catch(error => {
        console.error('获取文件系统数据失败:', error);
      });
  });
  const findall = async () => {
    axios.get('http://localhost:8083/versions')
     .then(response => {
        versions.value = response.data;
      })
     .catch(error => {
        console.error('获取文件系统数据失败:', error);
      });
  
}



const find = async () => {
const { value } = await ElMessageBox.prompt("请输入需要查找的密钥名","查找密钥",{ 
   inputValidator: (value) => {
     if (!value) {
       return '请输入需要查找的密钥名称';
     }
     return true;
   }
 });
 const versionNo = value;
 console.log(versionNo);
 const response = await axios.get(`http://localhost:8083/versions/find/${versionNo}`)
        .then(response => {
        versions.value = response.data;
      })
      .catch(error => {
        console.error('失败:', error);
      });;
}



  const renameKey = async (versionId) => {
    const { value } = await ElMessageBox.prompt("请输入新密钥名","更改密钥",{ 
      inputValidator: (value) => {
        if (!value) {
          return '请输入新的密钥名称';
        }
        return true;
      }
    });
    const versionNo = value;
    const response = await axios.post(`http://localhost:8083/versions/update?versionId=${versionId}&versionNo=${versionNo}`);
    console.log(response.data);
    if (response.data.success) {
        ElMessage({
    message: '更改成功',
    type: 'success',
  })
      const updatedVersions = await axios.get('http://localhost:8083/versions');
      versions.value = updatedVersions.data;
      deleteError.value = null;
    } 
   if (response.data.success==false){
    ElMessage({
    message: '更改失败'+response.data.errorMsg,
    type: 'error',
  })}
}
  

const addKey = async () => {
    const response = await axios.post(`http://localhost:8083/versions/createversion`);
    console.log(response);
    if (response.data.success) {
        ElMessage({
    message: '添加成功',
    type: 'success',
  })
      // 成功更新页面，例如重新获取数据
      const updatedVersions = await axios.get('http://localhost:8083/versions');
      versions.value = updatedVersions.data;
      deleteError.value = null;
    } else {
      // 显示错误信息弹窗
      ElMessage({
    message: '添加失败'+response.data.errorMsg,
    type: 'error',
  })  
    }
  
};




  //写完了
  const deleteKey = async (versionId) => {
  let versionID = versionId;

    const response = await axios.delete(`http://localhost:8083/versions/${versionID}`);
 
    if (response.data.success) {
        console.log(response);
    ElMessage({
    message: '删除成功',
    type: 'success',
  })
      // 成功更新页面，例如重新获取数据
      const updatedVersions = await axios.get('http://localhost:8083/versions');
      versions.value = updatedVersions.data;
      deleteError.value = null;
    } else {
      // 显示错误信息弹窗
      ElMessage({
    message: '删除失败'+response.data.errorMsg,
    type: 'error',
  })  ;
    }
  
};
  const goBackToFileSystem = () => {
    window.location.href = '/filesystem';
  };
  </script>
  
  <style scoped>
  .auth-layout {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    overflow: hidden;
  }
  
  .card-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .bottom-right-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .card-header {
    padding: 30px 30px 20px;
    background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
    color: white;
    text-align: center;
  }
  
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .logo img {
    width: 30px;
    height: 30px;
  }
  
  .card-header h1 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 600;
  }
  
  .card-header p {
    opacity: 0.9;
    font-size: 160px;
  }
  
  .card-body {
    padding: 30px;
  }
  
  .version-card {
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .card-header-inner {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 1.6rem;
  }
  
  .el-table th {
    background-color: #f0f0f0;
  }
  
  .header-cell {
    font-weight: bold;
  }
  
  .card-footer {
    padding: 20px 30px;
    text-align: center;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
  }
  
  .switch-link {
    color: #666;
  }
  
  .switch-link a {
    color: #4776E6;
    text-decoration: none;
    font-weight: 500;
    margin-left: 8px;
    transition: color 0.3s;
  }
  
  .switch-link a:hover {
    color: #3559c7;
    text-decoration: underline;
  }
  
  .top-right-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
  }
  
  .bottom-right-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  </style>
   
  